<!-- directive:title 节流提交按钮 -->
<!-- directive:breadcrumb 节流应用在提交按钮上 -->
<div class="panel-body">
    <form class="yxf14 bigpadding" name="From">
        <b class="yxf14-title"> <i></i> 开卡表单 </b>
        <!-- 提交 -->
        <div class="yxf14-box">
            <div class="yxf14-control">
                <button type="button" class="btn btn-danger yxf14-loadingbtn" disabled>提交表单</button>
                <button type="button" class="btn btn-danger" ng-click="submitFun($event)">提交表单</button>
            </div>
        </div>
    </form>
    <style type="text/xian" ui-bs>
        @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
        @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
        .yxf14-loadingbtn[disabled]:after{content:"中";}
        .yxf14-loadingbtn[disabled]:before{content:" ";margin: 0 8px 0 0;border-radius: 50%; width: 10px; height: 10px; display: inline-block; border: 2px solid #ddd; border-top-color: #333; -webkit-animation-name: spin; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-name: spin; animation-duration: 1s; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.3, 0.1, 0.3, 0.85); animation-timing-function: cubic-bezier(0.3, 0.1, 0.3, 0.85); }
    </style>
    <script type="text/xian" ui-bs>
        function($scope, $timeout, throttleSubmit) {
            $scope.submitFun = throttleSubmit(function(){
                console.log('校验第1项')
                console.log('校验第2项')
                console.log('校验第3项')
                var param = 1;
                if ( param == 2 ) { return false }
                return param
            },function(enable, param){
                console.log('提交代码', param)
                $timeout(function(){
                    console.log('提交成功')
                    enable()
                },3e3)
            })
        }
    </script>
</div>

